<template>
  <div class="ex-common-class" style="padding: 10px 0 60px 0;margin-top: 60px;">
    <h2>企业荣誉</h2>
    <div class="flex-row" style="justify-content: center;flex-wrap: wrap;">
      <div class="flex" id="eh-expert" v-for="(item, index) in ecData" :key="index">
        <div class="eh-image">
          <file-upload
            :is-display="true"
            list-type="picture-card"
            :limit="1"
            :maxSize="1"
            accept="image/*, .jpg, .png, .jpeg"
            v-model="item.image"
          >
            <i class="el-icon-picture"></i>
          </file-upload>
        </div>
        <div class="flex-all">
          <div :class="{'echome-validate-err': errors.has('honor_' + index)}">
            <el-input
              v-validate="'required|max:40'" :data-vv-name="'honor_' + index"
              style="margin-top: 5px;"
              type="textarea"
              :autosize="false"
              placeholder="荣誉名称(不超40字)"
              v-model="item.honorName"
              clearable>
            </el-input>
          </div>
        </div>
        <div class="" style="font-size: 20px;cursor: pointer;">
          <i class="el-icon-delete" @click="deleteItem(item, index)"></i>
        </div>
      </div>
      <div class="add-eh delete-column-icon flex-row-center" style="width: 20%;height: 235px;;margin-top: 50px;" @click="addItem">
        <i class="el-icon-plus"></i>
        <span>添加</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ec-expert",
  title: "企业专家",
  props: {
    value: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      ecData: [],
      currIndex: 0,
      toolbar: {
        zoomIn: 4,
        zoomOut: 4,
        oneToOne: 4,
        reset: 4,
        play: {
          show: 4,
          size: 'large',
        },
        rotateLeft: 4,
        rotateRight: 4,
        flipHorizontal: 4,
        flipVertical: 4,
      }
    }
  },
  mounted () {
    this.ecData = this.value
  },
  methods: {
    addItem () {
      this.ecData.push({image: '', honorName: ''})
    },
    deleteItem (item, index) {
      this.ecData.splice(index, 1)
    },
    validate () {
      return this.$validator.validateAll()
    }
  },
  watch: {
    'ecData': {
      handler: function () {
        this.$emit('input', this.ecData)
      }
    },
    'value' () {
      this.ecData = this.value
    }
  }
}
</script>

<style>
  .add-eh {
    border: 1px dashed #94C05A;
    text-align: center;
    color: #94C05A;
    font-size: 18px;
    padding: 6px;
    cursor: pointer;
  }
  .eh-image {
    height: 150px;
    width: 100%;
  }
  .eh-image .el-upload--picture-card {
    height: 150px;
    width: 100%;
  }
  .eh-image .el-upload-list--picture-card .el-upload-list__item {
    height: 150px;
    width: 100%;
  }
  .eh-experter input{
    text-align: center;
    font-size: 18px;
  }
  #eh-expert {
    width: 20%;
    padding: 0 20px;
    height: 240px;
    margin-top: 50px;
    box-sizing: border-box;
  }
  #eh-expert textarea {
    height: 80px;
    resize: none;
  }
</style>
